<template>
  <div class="comment-container container comment-list-box" id="comment-box">
    <div class="comment-form">
      <div class="header"><span class="header-title">评论</span></div>
      <div class="content">
        <div class="avatar-box">
          <img src="https://p3-passport.byteimg.com/img/user-avatar/984d9f84e31b27df27a576fc26a1c7a9~100x100.awebp" alt=""
            class="lazy avatar avatar" loading="lazy" />
        </div>
        <div class="form-box">
          <div class="auth-card">
            <div class="input-box">
              <div spellcheck="false" placeholder="输入评论" disabled="disabled" class="rich-input empty"
                :data-attr="contentBefore" contenteditable="true" @input="clearBeforeFunc" ref="inputBox">
              </div>
            </div>
          </div>
          <div class="action-box">
            <div class="submit">
              <button class="submit-btn" @click="submitComment">发表评论</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="comment-list-wrapper">
      <div class="title">
        全部评论
      </div>
      <div class="comment-list comment-list">
        <div v-if="false" class="comment" v-for="item in commentList" :key="item.id">
          <div class="popover-box user-popover popover">
            <a :href="item.href" target="_blank" rel="" class="user-link"><img :src="item.src" :alt="item.alt"
                class="lazy avatar avatar" loading="lazy" />
            </a>
          </div>
          <div class="content-box">
            <div class="comment-main">
              <div class="user-box">
                <div class="popover-box user-popover popover">
                  <a :href="item.href" target="_blank" rel="" class="username username"> <span class="name"
                      style="max-width: 128px"> {{ item.name }} </span>
                  </a>
                </div>
                <span class="position"> {{ item.position }} </span>
                <span class="time">
                  {{ item.time }}
                </span>
              </div>
              <div class="content">{{ item.content }}</div>
            </div>
          </div>
        </div>
        <div style="padding-left: 350px;">
          暂无评论
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import moment from 'moment';
import { ElMessage, ElMessageBox } from "element-plus";

const author = ref("");
const content = ref("");
const comments = ref<any[]>([]);
const inputBox = ref()

let contentBefore = ref('输入评论');

const commentList = ref([
  {
    id: 1,
    name: "前端BUG工程师",
    href: "/user/2875978150316045",
    src: "https://p3-passport.byteimg.com/img/user-avatar/b9ab8b18f6b8b8af27d454ce3df0cf9a~100x100.awebp",
    alt: "前端BUG工程师的头像",
    position: "前端",
    time: "11小时前",
    content: "vue3+vite已经撸了一个大项目了",
  },
  {
    id: 2,
    name: "用户3681784879333",
    href: "/user/4471028009666040",
    src: "https://p3-passport.byteimg.com/img/mosaic-legacy/3791/5035712059~100x100.awebp",
    alt: "用户3681784879333的头像",
    position: "",
    time: "2天前",
    content: "先码再看",
  },
  {
    id: 3,
    name: "Andy屎大颗",
    href: "/user/1165956688122078",
    src: "https://p3-passport.byteimg.com/img/user-avatar/2cc686ea05d5cf1683fd36cd052e3151~100x100.awebp",
    alt: "Andy屎大颗的头像",
    position: "ctrl+CorV资深前端开发 @ 屎大颗工业",
    time: "2天前",
    content: "6666",
  },
  {
    id: 4,
    name: "韦德约科维奇",
    href: "/user/1996368848357864",
    src: "https://p3-passport.byteimg.com/img/user-avatar/09b7f28ba29c73504ab02c2608b56417~100x100.awebp",
    alt: "韦德约科维奇的头像",
    position: "前端",
    time: "4天前",
    content: "问个问题，多个props、computed、watch 这种怎么写？",
  },
  {
    id: 5,
    name: "天才斑猫",
    href: "/user/2458948895512791",
    src: "https://p3-passport.byteimg.com/img/user-avatar/3ae89f81b01d9ce393e3dcf784f696ac~100x100.awebp",
    alt: "天才斑猫的头像",
    position: "",
    time: "5天前",
    content: "66",
  },
  {
    id: 6,
    name: "cy小梦",
    href: "/user/2154698523546254",
    src: "https://p3-passport.byteimg.com/img/user-avatar/11bd6fc3ea8f1028ec70ea4b29958e0d~100x100.awebp",
    alt: "cy小梦的头像",
    position: "",
    time: "5天前",
    content: "全家桶的使用也有一定的变动，比如vuex中对store定义，就发生了改变。感觉pinia拆得更细，不是大的状态树了。",
  },
  {
    id: 7,
    name: "cy小梦",
    href: "/user/2154698523546254",
    src: "https://p3-passport.byteimg.com/img/user-avatar/11bd6fc3ea8f1028ec70ea4b29958e0d~100x100.awebp",
    alt: "cy小梦的头像",
    position: "",
    time: "5天前",
    content: `&lt;script setup&gt;&lt;script&gt; 定义的组件，默认是关闭的。<br />vue2
                中可以用 this.$refs.component.xxx()
                来调用组件内部的方法，现在setup的中组件是不可以的。<br />需要用defineExpose在子组件中暴露出来，然后在父组件中定义一个和ref同名的变量去接收，才能使用。<br /><a
                  href="https://link.juejin.cn?target=https%3A%2F%2Fcn.vuejs.org%2Fapi%2Fsfc-script-setup.html%23defineprops-defineemits"
                  class="parse-emoji-url" style="color: #027fff"
                  title="https://cn.vuejs.org/api/sfc-script-setup.html#defineprops-defineemits" target="_blank"
                  rel="nofollow noopener noreferrer"><img alt="" style="vertical-align: sub" draggable="false"
                    src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/3f843e8626a3844c624fb596dddd9674.svg" />cn.vuejs.org</a>
                (文档，我上面描述得不够清晰）`,
  },
  {
    id: 8,
    name: "前端若水",
    href: "/user/3526889034487943",
    src: "https://p3-passport.byteimg.com/img/user-avatar/8a0dad7e02fe4c7774528697d95c6d6e~100x100.awebp",
    alt: "前端若水的头像",
    position: "无业",
    time: "5天前",
    content: "不错",
  },
  {
    id: 9,
    name: "董哥懂不懂",
    href: "/user/4406498336181261",
    src: "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/5/23/16ae258dd9521486~tplv-t2oaga2asx-no-mark:100:100:100:100.awebp",
    alt: "董哥懂不懂的头像",
    position: "",
    time: "5天前",
    content: "学习了",
  },
])

// 发表评论
const submitComment = () => {
  const myUsername = localStorage.getItem("username");
  const myAvatarUrl = localStorage.getItem("avatarUrl");
  const myContent = inputBox.value.innerText;
  const myId = parseInt(moment().toString());
  const myComment = {
    id: myId,
    name: myUsername as string,
    href: '',
    src: `http://127.0.0.1:3000\\uploads` + myAvatarUrl,
    alt: myUsername + '的头像',
    position: '前端',
    time: '刚刚',
    content: myContent
  };
  commentList.value.unshift(myComment);
  ElMessage({
    showClose: true,
    message: '评论成功!',
    type: 'success',
  })
};

const clearBeforeFunc = () => {
  contentBefore.value = '';
}

</script>

<style lang="less" scoped>
@border-color: #dcdfe6; //边框默认颜色

#comment-box {
  // margin-top: 1.67rem;

  .button,
  button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #007fff;
    color: #fff;
    border-radius: 2px;
    border: none;
    padding: .5rem 1.3rem;
    outline: none;
    transition: background-color .3s, color .3s;
    cursor: pointer;
  }

  .comment-form {
    display: flex;
    position: relative;
    padding-top: 1rem;
    border-radius: 2px;
    flex-direction: column;

    .header {
      margin-bottom: 2rem;

      .header-title {
        font-size: 18px;
        line-height: 30px;
        font-weight: 600;
        color: #252933;
      }
    }

    .content {
      display: flex;
      align-items: flex-start;

      .avatar-box {
        flex: 0 0 auto;

        .avatar {
          margin-right: 16px;
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }

      .form-box {
        flex: 1 1 auto;
        position: relative;

        .auth-card {
          position: relative;

          .input-box {
            font-size: 0;
            transition: all 0.3s;
            background: #f2f3f5;
            border: 1px solid #f2f3f5;
            border-radius: 4px;
            position: relative;

            .rich-input {
              position: relative;
              padding: 8px 12px;
              color: #252933;
              outline: none;
              min-height: 64px;
              box-sizing: border-box;
              line-height: 22px;
              font-size: 14px;
              resize: both;

              &::before {
                content: attr(data-attr);
                position: absolute;
                pointer-events: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                color: #8a919f;
              }
            }
          }
        }

        .action-box {
          display: flex;
          align-items: center;
          margin-top: 8px;

          .submit {
            flex: 0 0 auto;
            margin-left: auto;

            span {
              font-size: 14px;
              line-height: 22px;
              letter-spacing: .2px;
              color: #86909c;
              margin-right: 16px;
            }

            .submit-btn {
              flex: 0 0 auto;
              margin-left: auto;
              width: 92px;
              text-align: center;
              font-size: 14px;
              line-height: 36px;
              background: #1e80ff;
              border-radius: 4px;
              color: #fff;
              padding: 0;
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .comment-list-wrapper {
    padding: 40px 0 16px;

    .title {
      display: flex;
      align-items: center;

      position: relative;
      line-height: 30px;
      font-weight: 600;
      font-size: 18px;
      color: #252933;
      width: 100%;
      justify-content: space-between;
      padding-bottom: 8px;

      .sort {
        display: flex;
        align-items: center;

        font-size: 14px;
        color: #4e5969;
        font-weight: 400;
        cursor: pointer;
        background: var(--juejin-background);
        border-radius: 2px;
        padding: 3px;

        .item .active {
          border-radius: 2px;
          background: #fff;
        }
      }
    }

    .comment-list {

      .comment {
        display: flex;
        padding: 16px 0;

        .popover-box {
          align-items: unset;

          .user-link {
            flex: 0 0 auto;

            .avatar {
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }
          }
        }

        .content-box {
          flex: 1 1 auto;
          margin-left: 16px;

          .comment-main {
            position: relative;

            .user-box {
              display: flex;
              align-items: center;

              .popover-box {
                align-items: unset;

                .username {
                  display: flex;
                  align-items: center;

                  .name {
                    font-weight: 500;
                    font-size: 15px;
                    color: #252933;
                    max-width: 90px;
                    line-height: 26px;
                  }
                }
              }

              .position {
                font-size: 14px;
                color: #8a919f;
                line-height: 22px;
                margin-left: 13px;
                max-width: 160px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
              }

              .time {
                margin-left: auto;
              }
            }

            .content {
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-box-orient: vertical;
              font-weight: 400;
              font-size: 14px;
              line-height: 2rem;
              color: #515767;
              margin-top: 8px;
              -webkit-line-clamp: 6;
            }
          }
        }
      }
    }
  }
}
</style>
